<template>
  <!--<div class="home">
    <Row :gutter="15">
      <Col :lg="6" :md="12" :xs="24">
        <div class="card">
          <count-sales></count-sales>
        </div>
      </Col>
      <Col :lg="6" :md="12" :xs="24">
        <div class="card">
          <count-views></count-views>
        </div>
      </Col>
      <Col :lg="6" :md="12" :xs="24">
        <div class="card">
          <count-paid></count-paid>
        </div>
      </Col>
      <Col :lg="6" :md="12" :xs="24">
        <div class="card">
          <count-effect></count-effect>
        </div>
      </Col>
    </Row>

    <Row :gutter="15">
      <Col :lg="14" :xs="24">
        <div class="card">
          <tab-chart></tab-chart>
        </div>
      </Col>
      <Col :lg="10" :xs="24">
        <div class="card">
          <sales-rank></sales-rank>
        </div>
      </Col>
    </Row>

    <Row :gutter="15">
      <Col :lg="14" :sm="24">
        <div class="card card&#45;&#45;last">
          <hot-search></hot-search>
        </div>
      </Col>
      <Col :lg="10" :sm="24">
        <div class="card card&#45;&#45;last">
          <category-ratio></category-ratio>
        </div>
      </Col>
    </Row>

    <cus-footer></cus-footer>
  </div>-->
  <div
    class="home"
    style="background: #1E6FFF;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;"
  >
    <img src="../../../login/assets/img/banner2.png" alt="" style="width: 50%;" />
  </div>
</template>

<script>
import CategoryRatio from "./components/category-ratio";
import CountSales from "./components/count-sales";
import CountViews from "./components/count-views";
import CountPaid from "./components/count-paid";
import CountEffect from "./components/count-effect";
import TabChart from "./components/tab-chart";
import SalesRank from "./components/sales-rank";
import HotSearch from "./components/hot-search";
import countTo from "@/components/count-to/count-to";
import Vue from "vue";

Vue.component("count-to", countTo);

export default {
  name: "App",
  components: {
    CategoryRatio,
    CountSales,
    CountViews,
    CountPaid,
    CountEffect,
    TabChart,
    SalesRank,
    HotSearch
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.home {
  background: #f7f7f7;

  /deep/ .card {
    background-color: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
    font-size: 12px;
    letter-spacing: 0.5px;

    &__header {
      display: flex;
      align-items: center;
      height: 50px;
      padding: 0 20px;

      .label {
        font-size: 12px;
      }

      .value {
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: bold;
        margin-left: 10px;
      }
    }

    .card__footer {
      .value {
        display: flex;
        align-items: center;
      }
    }

    &__container {
      padding: 0 20px;
      height: 50px;
    }

    &__footer {
      display: flex;
      align-items: center;
      height: 50px;
      border-top: 1px solid #f7f7f7;
      font-size: 12px;
      margin: 0 5px;
      padding: 0 15px;
      box-sizing: border-box;

      .label {
        margin-right: 10px;
      }

      .value {
        font-size: 13px;
      }
    }
  }
}
</style>
